<template>
  <van-tabbar v-model="active" route active-color="#ee0a24" v-show="isShow">
    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>
    <van-tabbar-item to="/buy" icon="paid">值得买</van-tabbar-item>

    <!-- 购物车组件需要加徽标 -->
    <van-badge :content="skuNum" max="99" v-if="isshowBadge">
       <van-tabbar-item to="/cart" icon="shopping-cart-o" >购物车</van-tabbar-item>
    </van-badge>
    <van-tabbar-item to="/cart" icon="shopping-cart-o" v-else >购物车</van-tabbar-item>


   
    <van-tabbar-item @click="isLogin" icon="friends-o">个人</van-tabbar-item>
  </van-tabbar>
</template>

<script>
 import {readToken}  from '@/utils/auth'
export default {
  name: "TabBar",
  props:['skuNum'],
 
  data() {
    return {
      active:0,

      // isshowBadge:false,     //是否显示购物车


    }
  },
  
  methods:{
    isLogin(){
      const token = readToken()
      if(token){
        this.$router.push('/personal')
      }else{
        this.$router.push('/login')
      }
    },

    //   // 是否显示购物车右上角的徽标
    // HandleisshowBadge(){
    //    this.$route.path == '/cart'
    // }

    isCart(){
      const token = readToken()
      if(token){
        this.$router.push('/cart')
      }else{
        this.$router.push('/login')
      }
    }

  },
  computed:{
    isShow(){
      return this.$route.meta.showTabbar
    },
      // 是否显示购物车右上角的徽标
    isshowBadge(){
      return  this.$route.path == '/cart'
    }
  },
 
};
</script>

<style lang="less" scoped>
</style>